<template>
	<div class="exam-cont">
		<div class="exam-content">
			<div class="exam-title">
				<div class="exam-name">{{paper.title}}</div>
				<div class="exam-option">
					<div class="exam-time">{{countTime}}</div>
					<!-- <div class="exam-btn">保存草稿</div> -->
					<div class="exam-btn" @click="uploadPaper">提交答卷</div>
				</div>
			</div>
			<div class="exam-details">
				<div class="exam-nums">
					<div class="exam-types" v-if="radioQuestion.length!=0">
						<div class="exam-type-title">单选题 {{radioNum}}/{{radioQuestion.length}}</div>

						<div class="exam-numbox">
							<div class="exam-num-item"
								:class="{'exam-num-isedit': item.answered, 'active-item': activeQuestion == item.recId}"
								v-for="(item, index) in radioQuestion" @click="numClick(item)">{{ index + 1 }}</div>
						</div>
					</div>
					<div class="exam-types" v-if="multiQuestion.length!=0">
						<div class="exam-type-title">多选题 {{multiNum}}/{{multiQuestion.length}}</div>

						<div class="exam-numbox">
							<div class="exam-num-item"
								:class="{'exam-num-isedit': item.answered, 'active-item': activeQuestion == item.recId}"
								v-for="(item, index) in multiQuestion" @click="numClick(item)">{{ index + 1 }}</div>
						</div>
					</div>
					<div class="exam-types" v-if="judgeQuestion.length!=0">
						<div class="exam-type-title">判断题 {{judgeNum}}/{{judgeQuestion.length}}</div>

						<div class="exam-numbox">
							<div class="exam-num-item"
								:class="{'exam-num-isedit': item.answered, 'active-item': activeQuestion == item.recId}"
								v-for="(item, index) in judgeQuestion" @click="numClick(item)">{{ index + 1 }}</div>
						</div>
					</div>
				</div>
				<div class="exam-question">
					<div class="exam-querstion-cont">
						<div class="question-title" v-html="question.content"></div>
						<div class="answers-cont">
							<div class="radio-answers answers" v-if="question.quType == 1">
								<el-radio-group v-model="answersVal">
									<el-radio v-for="item in answers" :label="item.recId">{{item.abc}}: {{item.content}}</el-radio>
								</el-radio-group>
							</div>
							<div class="radio-answers answers" v-if="question.quType == 2">
								<el-checkbox-group v-model="answersVal">
									<el-checkbox v-for="item in answers" :label="item.recId">{{item.abc}}: {{item.content}}</el-checkbox>
								</el-checkbox-group>
							</div>
							<div class="radio-answers answers" v-if="question.quType == 3">
								<el-radio-group v-model="answersVal">
									<el-radio v-for="item in answers" :label="item.recId">{{item.abc}}: {{item.content}}</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
					<div class="exam-qustion-btns">
						<el-button type="primary" round @click="goNext(1)">上一题</el-button>
						<el-button type="primary" round @click="goNext(2)">下一题</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getTestDetailsApi,
		getTestQuestionApi,
		upLoadAnswerApi,
		upLoadTestApi
	} from '@/api/Test'
	export default {
		data() {
			return {
				id: this.$route.query.id,
				paper: {},
				radioQuestion: [],
				radioNum: 0,
				multiQuestion: [],
				multiNum: 0,
				judgeQuestion: [],
				judgeNum: 0,
				question: {},
				answers: [],
				answersVal: [],
				activeQuestion: '',
				allquestion: [],
				activeIndex: 0,
				countTime: '00:00'
			}
		},
		created() {
			this.getTest()
		},
		methods: {
			uploadPaper() {
				let list = this.allquestion,
					num = 0,
					str = ''
				for (let i = 0; i < list.length; i++) {
					if (list[i].answered == 0) {
						num++
					}
				}
				if (num != 0) {
					str = '您还有' + num + '道题未填写，是否交卷！'
				} else {
					str = '您已经填写完全部试题，是否交卷！'
				}

				this.$confirm(str, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					this.upPaper()
				}).catch(() => {

				});
			},
			upPaper() {
				upLoadTestApi({
					paperId: this.paper.recId
				}).then(res => {
					if (res.code == 200) {
						let str = '您已成功提交，您的本次考试得分' + res.data.userScore + '分'
						this.$alert(str, '提示', {
							confirmButtonText: '确定',
							beforeClose: (action, instance, done) => {
								this.$router.back()
								done();
							},
						}).then(() => {
							this.$router.back()
						}).catch(() => {

						});
					}
				})
			},
			goNext(num) {
				console.log(this.answersVal)
				if (this.answersVal && this.answersVal.length != 0) {
					this.uploadAnswer(num)
				} else {
					this.$message({
						message: '请选择答案',
						type: 'warning'
					})
				}
			},
			numClick(item) {
				let id = item.recId
				let list = this.allquestion
				let i = list.find(obj => {
					return obj.recId == id
				})
				this.getQuestion(id)
				this.activeIndex = i.index
				this.activeQuestion = i.recId
			},
			uploadAnswer(num) {
				let answersVal = this.answersVal
				let params
				let type = this.allquestion[this.activeIndex].quType
				if (type == 2) {
					params = new URLSearchParams()
					for (let i = 0; i < answersVal.length; i++) {
						params.append('answerids', answersVal[i])
					}
					params.append('questionId', this.activeQuestion)
				} else {
					params = {
						answerids: this.answersVal,
						questionId: this.activeQuestion
					}
				}
				upLoadAnswerApi(params).then(res => {
					if (res.code == 200) {
						this.allquestion[this.activeIndex].answered = 1
						let obj = this.allquestion[this.activeIndex]
						let id = this.activeQuestion
						let type = {
							1: 'radioQuestion',
							2: 'multiQuestion',
							3: 'judgeQuestion'
						}
						let list = this[type[obj.quType]]
						let item = list.find(i => {
							return i.recId == this.activeQuestion
						})
						item.answered = 1
						if (num == 1) {
							if (this.activeIndex == 0) {
								this.$message({
									message: '当前题已经是第一道了',
									type: 'warning'
								})
								return
							} else {
								let list = this.allquestion
								this.activeIndex = this.activeIndex - 1
								this.activeQuestion = list[this.activeIndex].recId
								this.getQuestion(this.activeQuestion)

							}
						} else {
							let list = this.allquestion
							if (this.activeIndex == list.length - 1) {
								this.$message({
									message: '当前题已经是最后一道了',
									type: 'warning'
								})
								return
							} else {
								this.activeIndex = this.activeIndex + 1
								this.activeQuestion = list[this.activeIndex].recId
								this.getQuestion(this.activeQuestion)
							}
						}
					}
				})
			},
			getTest() {
				getTestDetailsApi({
					userexamId: this.id
				}).then(res => {
					console.log(res)
					let judge = res.data.judgeQuestion,
						judgeIs = 0
					for (let i = 0; i < judge.length; i++) {
						if (judge[i].answered) {
							judgeIs++
						}
					}
					let multi = res.data.multiQuestion,
						multiIs = 0
					for (let i = 0; i < multi.length; i++) {
						if (multi[i].answered) {
							multiIs++
						}
					}
					let radio = res.data.radioQuestion,
						radioIs = 0
					for (let i = 0; i < radio.length; i++) {
						if (radio[i].answered) {
							radioIs++
						}
					}
					let all = [...radio, ...multi, ...judge]
					for (let i = 0; i < all.length; i++) {
						all[i].index = i
					}
					this.allquestion = all
					this.judgeNum = judgeIs
					this.multiNum = multiIs
					this.radioNum = radioIs
					this.judgeQuestion = judge
					this.multiQuestion = multi
					this.paper = res.data.paper
					this.radioQuestion = radio
					for (let i = 0; i < all.length; i++) {
						if (all[i].answered == 0) {
							this.getQuestion(all[i].recId)
							this.activeIndex = i
							this.activeQuestion = all[i].recId
							break;
						}
					}
					if (!this.activeIndex) {
						this.getQuestion(all[0].recId)
						this.activeIndex = 0
						this.activeQuestion = all[0].recId
					}
				})
			},
			getQuestion(id) {
				this.activeQuestion = id
				getTestQuestionApi({
					questionId: id
				}).then(res => {
					let list = res.data.answers
					let type = res.data.question.quType

					let arr = []
					for (let i = 0; i < list.length; i++) {
						if (list[i].checked != 0) {
							arr.push(list[i].recId)
						}
					}

					if (type == 2) {
						this.answersVal = arr
					} else {
						let str = arr.join(',')
						if (str) {
							this.answersVal = Number(str)
						}
					}
					this.question = res.data.question
					this.answers = res.data.answers
				})
			}
		}
	}
</script>
<style lang="less">
	@contWidth: 1280px;

	.exam-cont {
		background-color: #F7F7F7;
		min-height: calc(100vh - 120px);

		.exam-content {
			width: @contWidth;
			margin: 0 auto;
		}

		.exam-title {
			height: 116px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.exam-option {
			display: flex;
			align-items: center;
		}

		.exam-name {
			font-size: 36px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.exam-time {
			height: 50px;
			font-size: 36px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-right: 53px;
		}

		.exam-btn {
			width: 148px;
			height: 54px;
			background: #E02020;
			border-radius: 27px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 18px;
			cursor: pointer;
		}

		.exam-details {
			display: flex;
		}

		.exam-nums {
			width: 323px;
			background: #FFFFFF;
			border: 1px solid #DDDDDD;
			padding: 4px 26px 30px;
		}

		.exam-type-title {
			padding: 27px 0 16px;
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.exam-numbox {
			display: flex;
			flex-wrap: wrap;
		}

		.exam-num-item {
			width: 42px;
			height: 42px;
			background: #FFFFFF;
			border-radius: 4px;
			border: 1px solid #DDDDDD;
			margin: 0 14px 10px 0;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 19px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;

			&:nth-of-type(5n) {
				margin: 0 0 10px 0;
			}
		}

		.exam-num-isedit {
			background: #E5ECFF;
			border: 1px solid #2360FE;
			color: #2360FE;
		}

		.active-item {
			border: 1px solid #2360FE;
		}

		.exam-question {
			border: 1px solid #DDDDDD;
			width: 955px;
			background-color: #fff;

			.exam-querstion-cont {
				min-height: 300px;
				padding: 30px;
			}

			.question-title {
				margin-bottom: 30px;
			}
		}

		.el-checkbox__label {
			width: calc(100% - 14px);
			white-space: normal;
			word-break: break-all;
			vertical-align: middle;
		}

		.exam-qustion-btns {
			display: flex;
			justify-content: center;
			align-items: center;

			// min-height: 100%;

			.el-button {
				width: 202px;
				height: 54px;
				background: #2360FE;
				box-shadow: 0px 4px 10px 0px rgba(35, 96, 254, 0.5);
				border-radius: 27px
			}
		}

		.el-radio {
			display: block;
			margin-bottom: 20px;
		}

		.el-checkbox {
			display: block;
			margin-bottom: 20px;
		}
	}
</style>